{% extends 'layout.html' %}
<!--库存管理-->
{% block title %}
库存
{% endblock %}

{% block js %}
<script>
    // 添加出库按钮事件监听
    document.addEventListener('DOMContentLoaded', function() {
        // 为所有出库按钮添加点击事件监听器
        console.log("库存管理-界面加载完成");
        const outboundButtons = document.querySelectorAll('.outbound-btn');//查找页面上所有具有 outbound-btn 类的元素
        outboundButtons.forEach(button => {
            button.addEventListener('click', async function() {
                const deviceId = this.getAttribute('data-device-id');//获取 data-device-id 属性
                const form = this.closest('.outbound-form');//最近的具有 outbound-form 类的祖先元素（表单）
                
                // 发送器件编号到串口
                if (typeof sendSerialData !== 'undefined' && isConnected) {
                    // 发送格式为 "DE,对应编号"
                    const message = `DE,${deviceId}`;
                    const success = await sendSerialData(message);//发送数据到串口
                    if (success) {
                        showNotification(`器件 ${deviceId} 编号已发送到串口`, 'success');
                    }
                } else if (!isConnected) {
                    showNotification('串口未连接，无法发送器件编号', 'error');
                }
                
                // 提交表单
                form.submit();
            });
        });
    });
</script>
{% endblock %}

{% block body %}

<!--样式-->
<style>
    /*单个器件信息样式*/
    .component-card {
        height: 150px;
        /*max-width: 1500px; !* 设置段落的最大宽度*!*/
        background-color: white; /* 背景颜色 */
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); /* 向 div 元素添加阴影 */
        padding: 1.5rem;
        display: flex; /* 弹性布局 */
        gap: 2rem; /* 左右间距 */
        border: 1px solid #e0e0e0; /* 边框 */
        margin: 10px; /* 上 右 下 左 */
    }

    /*图片样式*/
    .image-container {
        width: 140px; /* 宽度 */
        margin-top: 3px; /* 上外边距 */
        margin-bottom: 3px; /* 下外边距 */
        margin-left: 3px; /* 左外边距 */
        /* border: 1px dashed #cccccc; 图片边框 */
        border-radius: 8px; /* 圆角 */
        display: flex; /* 弹性布局 */
        align-items: center; /*  */
        justify-content: center; /* 字体居中排列 */
        /*background-color: #fafafa; !* 调试用：背景颜色 *!*/
        color: #666; /* 颜色 */
        font-size: 14px; /* 字体大小 */
        overflow: hidden;
    }

    /*器件信息*/
    .info-container {
        flex: 1;
        /* 让所有弹性盒模型对象的子元素都有相同的长度 */
        display: grid;
        /* 3列，每列1fr；4行，每行1rf */
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        /* gap: 1px; */
    }

    .info-container.item1 {
        grid-row: 3/5;
        grid-column: 3/4;
        /*background: #4285f4;!*填充颜色 *!*/
        /*border: 1px solid blue; !*边框： 线宽 样式 颜色 *!*/
        display: flex;
        /* 将父级元素设置为 Flex 容器 */
        /*justify-content: center; !* 子元素水平居中 *!*/
        align-items: center;
        /* 子元素垂直居中 */
    }

    /*器件信息内容*/
    .info-item {
        /*border: 1px solid blue;!* 调试用：子元素边框 *!*/
        display: flex;
        /* 将父级元素设置为 Flex 容器 */
        /*justify-content: center; !* 子元素水平居中 *!*/
        align-items: center;
        /* 子元素垂直居中 */
    }

    /*取出数量*/
    .info-custom-input {
        width: 100px;
        height: 30px;
        margin-left: 10px;
    }

    /*添加按钮*/
    .add-btn {
        display: flex; /* 将父级元素设置为 Flex 容器 */
        justify-content: center; /* 子元素水平居中 */
        align-items: center; /* 子元素垂直居中 */
        height: 60%;
        width: 30%;
        border-radius: 8px; /* 圆角 */
        background-color: #007BFF; /* 背景颜色 */
    }

</style>

<!--添加、搜索、按钮-->
<div style="display: flex; align-items: center; margin-bottom: 10px; gap: 15px;">
    <a class="btn btn-success" href="/order/create">
        <span aria-hidden="true" class="glyphicon glyphicon-plus-sign"></span>入库
    </a>
    <!--搜索条件-->
    <form class="form-inline" method="GET" style="display: flex; align-items: center; gap: 5px; flex: 1;">
        <div class="form-group" style="margin-bottom: 0;">
            <label>分类</label>
            <input class="form-control" name="classify" placeholder="分类" style="width: 100px" type="text"
                   value="{{ classify }}">
        </div>
        <div class="form-group" style="margin-bottom: 0;">
            <label>名称</label>
            <input class="form-control" name="name_s" placeholder="名称" type="text" value="{{ name_s }}">
        </div>
        <div class="form-group" style="margin-bottom: 0;">
            <label>值</label>
            <input class="form-control" name="value_s" placeholder="值" style="width: 100px" type="text"
                   value="{{ value_s }}">
        </div>
        <div class="form-group" style="margin-bottom: 0;">
            <label>封装</label>
            <input class="form-control" name="encapsulation" placeholder="封装" style="width: 150px" type="text"
                   value="{{ encapsulation }}">
        </div>
        <button class="btn btn-primary" type="submit">应用筛选</button>
        <button class="btn btn-primary" onclick="window.location.href='/order/stock'" type="button">清除筛选</button>
    </form>
</div>

<!-- <button class="btn btn-primary" type="button">应用筛选</button> -->
<!--表格-->
<!-- 器件信息 -->
{% for item in data_list %}
<div class="component-card">
    <!-- 图片显示 -->
    <div class="image-container">
        <img alt="未匹配" src="/image/{{item.编号}}.jpg" style="max-width: 100%; max-height: 100%; object-fit: fill;">
    </div>
    <!-- 器件信息 -->
    <div class="info-container">
        <!-- 名称 -->
        <div class="info-item" style="font-size:18px;">{{item.名称}}</div>
        <!-- 值 -->
        <div class="info-item">
            <span class="info-label">值:</span>
            <span class="info-value">{% if item.值 %}{{item.值}}{% endif %}</span>
        </div>
        <!-- 库存数量 -->
        <div class="info-item">
            <span class="info-label">库存数量:</span>
            <span class="info-value">NULL个</span>
        </div>
        <!-- 封装 -->
        <div class="info-item">
            <span class="info-label">封装:</span>
            <span class="info-value">{{item.封装}}</span>
        </div>
        <!-- 参考价格 -->
        <div class="info-item">
            <span class="info-label">参考价格:</span>
            <span class="info-value">NULL (元/个)</span>
        </div>
        <!-- 取出数量 -->
        <div class="info-item">
            <label for="device-id" style="font-weight: normal;">取出数量:</label>
            <input class="info-custom-input" id="device-id" maxlength="4" name="deviceId" type="number">
            <span class="info-value" style="margin-left: 15px;">个</span>
        </div>
        <!-- 类目 -->
        <div class="info-item">
            <span class="info-label">分类:</span>
            <span class="info-value">{{item.分类}}</span>
        </div>
        <!-- 供应商 -->
        <div class="info-item">
            <span class="info-label">供应商:</span>
            <span class="info-value">NULL</span>
        </div>
        <!-- 编号 -->
        <div class="info-item">
            <span class="info-label">编号:</span>
            <span class="info-value">{{item.编号}}</span>
        </div>
        <!-- 备注 -->
        <div class="info-item">
            <span class="info-label">描述:</span>
            <span class="info-value">{% if item.描述 %}{{item.描述}}{% endif %}</span>
        </div>
        <!-- 出库 按钮 -->
        <div class="info-container item1">
            <form action="/order/outbound" method="POST" style="display: inline;" class="outbound-form">
                <input type="hidden" name="device_id" value="{{item.编号}}">
                <input type="hidden" name="classify" value="{{ classify }}">
                <input type="hidden" name="name_s" value="{{ name_s }}">
                <input type="hidden" name="value_s" value="{{ value_s }}">
                <input type="hidden" name="encapsulation" value="{{ encapsulation }}">
                <button type="button" class="btn btn-primary outbound-btn" data-device-id="{{item.编号}}">出库</button>
            </form>
        </div>
    </div>
</div>
{% endfor %}

{% endblock %}